<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
</head>
<body>
<select id="suburbSelect">
<?php 
$result = mysql_query("SELECT s.id,s.name FROM Suburbs s ORDER BY s.name");
while($suburb = mysql_fetch_array($result))
{
  echo "<option id='$suburb['id']'>$suburb['name']</option>";  
}
echo "</select>";

while($suburb = mysql_fetch_array($result))
{
	echo "<div id='suburbDiv_$suburb['id']'>"; 
	$result2 = mysql_query("SELECT hg.name,hg.id,hg.pic FROM HomeGroups hg WHERE hg.suburbID=$suburb['id'] ORDER BY hg.name");
	while($homeGroup = mysql_fetch_array($result2)
	{
		echo "<div class='homeGroupDiv' id='homeGroupDiv_$homeGroup['id']'>";
		echo "<img src='$homeGroup['pic']'/>";
		echo "<h3>$homeGroup['name']</h3>";
		echo "<button class='contactButton' onClick='contactUs($homeGroup['id']'>Get in touch</button>";			
		echo "</div>";		
	}
	echo "</div>";
}
?>

<div class="popUpForm">
<h4>Please fill in your details, hit "Send" and we'll get in touch with you ASAP</h4>
<label>Name</label><input type="text" id="name" />
<label>Cell No.</label><input type="text" id="cell" />
<label>Email address</label><input type="text" id="email" />
<label>Message</label><textarea id="message" rows="4" onkeyup="limitText('message','cleft')" onblur="limitText('message','cleft')"></textarea>
<label id="cleft">100</label><label> characters remaining</label>
<button class='sendButton' onClick='cancelSend'>Cancel</button>
<button class='sendButton' onClick='sendForm'>Send</button>
</div>

<div id="modalMask"></div>

<script>
var hgId="";
var visibleDiv="";

function contactUs(homeGroupId)
{
	hgId=homeGroupId;
	
	// Pop up form	     
	//Get the screen height and width
	var maskHeight = $(document).height();
	var maskWidth = $(document).width();
 
	//Set height and width to mask to fill up the whole screen
	$('#modalMask').css({'width':maskWidth,'height':maskHeight});
	 
	//transition effect     
	$('#modalMask').fadeIn(500);  
 
	//Get the window height and width
	var winH = $(document).height();
	var winW = $(document).width();
		   
	//Set the popup window to center
	$("#popUpForm").css('top',  winH/2-$(id).height()/2);
	$("#popUpForm").css('left', winW/2-$(id).width()/2);
 
	//transition effect
	$("#popUpForm").fadeIn(500);
}

function limitText(AId,BId)
{
	var e1 = document.getElementById(AId);
	var e2 = document.getElementById(BId);
	var l1 = e1.value.length;
	(l1 > 100)?e1.value = e1.value.substring(0,100):e2.innerHTML = 100 - l1 
}

function sendForm()
{
	
}

$("#suburbSelect").change(function(){
	if(visibleDiv!="")
	{
		$("#"+visibleDiv).slideUp();		
	}
	visibleDiv=$(this).attr('id');
	$("#"+visibleDiv).slideDown();		
});
</script>


</body>
</html>